<template>
  <div class="panel-tree-frame">
    <el-input v-if="showFilter" v-model="filterValue" :placeholder="placeholder" />
    <div v-if="selectSingle" class="panel-tree">
      <node-select-single
        v-for="(item,index) in dataRootNode"
        :key="index"
        :node="item"
        :data="filtedData"
        :tree-template="treeTemplate"
        :expand="expanded"
        :show-icon="showIcon"
        @click="$emit('click',$event)"
        @dblclick="$emit('dblclick',$event)"
        @contextmenu="contextmenu"
      />
      <div v-if="showFooter" class="list-footer">
        <el-button @click="expanded=true">全部展开</el-button>
        <el-button @click="expanded=false">全部收起</el-button>
      </div>
    </div>
    <div v-else class="panel-tree">
      <node-select-multi
        v-for="(item,index) in dataRootNode"
        :key="index"
        :node="item"
        :data="filtedData"
        :tree-template="treeTemplate"
        :expand="expanded"
        :show-icon="showIcon"
        @click="$emit('click',$event)"
        @dblclick="$emit('dblclick',$event)"
        @contextmenu="contextmenu"
      />
      <div v-if="showFooter" class="list-footer">
        <el-button @click="expanded=true">全部展开</el-button>
        <el-button @click="expanded=false">全部收起</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getRoot, filterBranch } from '@service/utilTool.js'
export default {
  name: 'PanelTree',
  components: {
    NodeSelectSingle: () => import('@components/NodeSelectSingle.vue'),
    NodeSelectMulti: () => import('@components/NodeSelectMulti.vue')
  },
  props: {
    data: { // tree list data set
      type: Array,
      required: true,
      default: () => []
    },
    treeTemplate: { // tree node display props
      type: Object,
      required: false,
      default: () => ({
        label: 'name',
        key: 'uid',
        item: 'item_uid',
        parent: 'parent_uid'
      })
    },
    expand: { // flag of tree expand;false: default,shrinked;true: expanded
      type: Boolean,
      required: false,
      default: false
    },
    selectSingle: { // flag of tree selectSingle;false: selectMulti,true: selectSingle
      type: Boolean,
      required: false,
      default: true
    },
    showIcon: { // flag of show data icon(item.info.icon)
      type: Boolean,
      required: false,
      default: false
    },
    showFooter: { // flag of footer display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: false
    },
    showFilter: { // flag of show filter icon(item.info.icon)
      type: Boolean,
      required: false,
      default: true
    },
    filter: { // filter condition
      type: String,
      required: false,
      default: null
    },
    placeholder: { // filter placeholder
      type: String,
      required: false,
      default: '输入关键字'
    }
  },
  data() {
    return {
      filterValue: this.filter,
      expanded: this.expand
    }
  },
  computed: {
    filtedData() {
      return filterBranch(this.data, this.filterValue, this.treeTemplate)
    },
    dataRootNode() {
      return getRoot(this.filtedData, this.treeTemplate)
    }
  },
  created() {
    this.$nextTick(() => {
      // console.log('dataRootNode', this.dataRootNode)
    })
  },
  methods: {
    contextmenu(data, event) {
      this.$emit('contextmenu', data, event)
    }
  }
}
</script>
<style scoped>
</style>
